@charset "utf-8";
@import "common/reset";
//像素比除以2
@function p($px){
    @return $px/2+px;
}
html,body{
    height: 100%;
}
*{
    margin: 0;
    padding: 0;
}
.mobile{
    width: 100%;
    height: 100%;
    background: url(../../img/back-img.png);

header{
    width: 100%;
    height: p(88);
    background: #0f0f0f;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .last{
        width: p(103);
        height: p(43);
        display: flex;
        .last-img{
            width: p(23);
            height: p(43);
            overflow: hidden;
            img{
                width: 100%;
            }
        }
        p{
            font-size: p(28);
            line-height: p(28);
            color: #fff;
            margin-top: p(5);
            margin-left: p(16);
        }
    }
    h1{
        font-size: p(36);
        color: #fff;
        span{
            margin-right: p(11);
        }
    }
    .dian{
        width: p(6);
        height: p(34);
        overflow: hidden;
        img{
            width: 100%;
        }
    }
}
        .banner-bor{
            width: 100%;
            height: p(552);
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(to top,#a0a0a0,#e9e9e9,#fff);
            .banner-img{
                width: p(467);
                height: p(488);
                overflow: hidden;
                img{
                    width: 100%;
                }
            }
        }
    section{
        width: 100%;
        padding: 0 p(20);
        //模板
        .muban-txt{
            display: flex;
            justify-content: space-around;
            .muban-txt-left{
                width: p(418);
                h1{
                    font-size: p(30);
                    color: #5c5c5c;
                    line-height: p(30);
                    margin-top: p(29);
                }
                p{
                    font-size: p(26);
                    color: #5c5c5c;
                    line-height: p(28);
                    letter-spacing: p(2);
                    padding-left: p(14);
                }
            }
            .muban-txt-right{
                width: p(89);
                height: p(86);
                border-left: p(2) solid #e5e5e5;
                padding-left: p(38);
                margin-top: p(80);
                .coll-img{
                    width: p(42);
                    height: p(40);
                    overflow: hidden;
                    img{
                        width: 100%;
                    }
                }
                >p{
                    font-size: p(20);
                    color: #5c5c5c;
                }
            }
        }
        //微信价
        .wechat{
            width: 100%;
            display: flex;
            justify-content: space-around;
            margin-top: p(72);
            >p:nth-child(1){
                font-size: p(28);
                color: #e30202;
            }
            >p:nth-child(2){
                font-size: p(20);
                color: #6b6b6b;
                span{
                    color: #228ac5;
                }
            }
        }
        //选项部分
        .choose{
            width: 100%;
            border-bottom: p(3) solid #e5e5e5;
            display: flex;
            justify-content: space-around;
            padding-bottom: p(7);
            .choose-left{
                width: p(310);
                height: p(197);
                .choose-left-top{
                    display: flex;
                    justify-content: space-between;
                    >p{
                        font-size: p(24);
                        line-height: p(24);
                        margin-top: p(10);
                        color: #6b6b6b;
                    }
                    select{
                        width: p(190);
                        height: p(50);
                        font-size: p(20);
                        color: #5c5c5c;
                    }
                }
                .choose-left-middle{
                    display: flex;
                    justify-content: space-between;
                    .choose-left-middle-left{
                        display: flex;
                        flex-direction: column;
                        >p:nth-child(1){
                            font-size: p(24);
                            color: #6b6b6b;
                            display: flex;
                            justify-content: center;
                        }
                        >p:nth-child(2){
                            font-size: p(18);
                            color: #6b6b6b;
                            letter-spacing: p(-3);
                        }
                    }
                    .choose-left-middle-right{
                        width: p(190);
                        height: p(50);
                        border: p(1) solid #6b6b6b;
                        display: flex;
                        margin-top: p(16);
                        >p:nth-child(1){
                            width: p(60);
                            height: p(49);
                            text-align: center;
                            background: #b5b5b5;
                            border: p(1) solid #6b6b6b;
                        }
                        >p:nth-child(2){
                            width: p(70);
                            height: p(49);
                            text-align: center;
                        }
                        >p:nth-child(3){
                            width: p(60);
                            height: p(49);
                            text-align: center;
                            background: #b5b5b5;
                            border: p(1) solid #6b6b6b;
                        }
                    }
                }
                >p{
                    font-size: p(20);
                    color: #6b6b6b;
                    line-height: p(20);
                    margin-top: p(30);
                }
            }
            .choose-right{
                width: p(147);
                .choose-right-btn1{
                    width: p(147);
                    height: p(62);
                    background: #38e859;
                    border-radius: p(8);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    p{
                        font-size: p(19);
                        color: #fff;
                    }
                }
                .choose-right-btn2{
                    width: p(147);
                    height: p(62);
                    background: #f6ac2b;
                    border-radius: p(8);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: p(6);
                    p{
                        font-size: p(19);
                        color: #fff;
                    }
                }
                .choose-right-btn3{
                    width: p(147);
                    height: p(62);
                    background: #f85c5c;
                    border-radius: p(8);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: p(6);
                    p{
                        font-size: p(19);
                        color: #fff;
                    }
                }
            }
        }
    }
    .gray{
        width: 100%;
        height: p(21);
        background: url(../img/back-img.png);
        margin-top: p(15);
        border-bottom: p(1) solid #cac9cd;
        border-top: p(1) solid #cac9cd;
            
    }
    #SPSX{
        display: none;
    }
    #SPSX:checked ~ .bottom-cho .spsx{
        background: #fff;
        border-bottom: p(1) solid transparent;
        color: #ff4b4b;
    }
    #SPSX:checked ~ .bottom-cho .spsx p{
        color: #ff4b4b;
    }
	#TWXX{
        display: none;
    }
    #TWXX:checked ~ .bottom-cho .twxx{
        background: #fff;
        border-bottom: p(1) solid transparent;
        color: #ff4b4b;
    }
    #TWXX:checked ~ .bottom-cho .twxx p{
        color: #ff4b4b;
    }
    #TWXX:checked ~ .bottom-txt{
        display: none;
    }
    #TWXX:checked ~ .bottom-txt2{
        display: block;
    }
    #PJ{
        display: none;
    }
    #PJ:checked ~ .bottom-cho .pj{
        background: #fff;
        border-bottom: p(1) solid transparent;
        color: #ff4b4b;
    }
    #PJ:checked ~ .bottom-cho .pj p{
        color: #ff4b4b;
    }
    .bottom-cho{
        width: 100%;
        display: flex;
        label{
            width: 33.3%;
            .spsx{
                width: 100%;
                height: p(74);
                background: #e7e7e7;
                display: flex;
                justify-content: center;
                align-items: center;
                border-right: p(1) solid #d9d9d9;
                border-bottom: p(1) solid #d9d9d9;
                p{
                    font-size: p(28);
                    color: #515151;
                    line-height: p(28);
                }
            }
        }
        label{
             width: 33.3%;
            .twxx{
                width: 100%;
                height: p(74);
                background: #e7e7e7;
                display: flex;
                justify-content: center;
                align-items: center;
                border-right: p(1) solid #d9d9d9;
                border-bottom: p(1) solid #d9d9d9;
                p{
                    font-size: p(28);
                    color: #515151;
                    line-height: p(28);
                }
            }
        }
        label{
             width: 33.3%;
            .pj{
                width: 100%;
                height: p(74);
                background: #e7e7e7;
                display: flex;
                justify-content: center;
                align-items: center;
                border-bottom: p(1) solid #d9d9d9;
                p{
                    font-size: p(28);
                    color: #515151;
                    line-height: p(28);
                }
            }
        }
    }
    .bottom-txt{
        margin-left: 3%;
        margin-bottom: 5%;
        p{
            font-size: p(26);
            color: #5c5c5c;
            margin-top: p(10);
        }
    }
    .bottom-txt2{
        margin-left: 3%;
        margin-bottom: 5%;
        display: none;
        p{
            font-size: p(26);
            color: #5c5c5c;
            margin-top: p(10);
        }
    }
}